<?php loadScriptDepends('swiper');?>

<style>
html, body {
    position: relative;
    height: 100%;
}
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
    background-image:url('./views/statics/image/setup-bg.gif');
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.p-title {margin:100px 0 0 0;}
.p-title img {
	width:70%;
}
/*.p-title img {width:21px;}*/
.p-word {margin:180px 0 0 0;}
.p-word img {
	width: 60%;
}
/*.p-word img {width:12px;}*/
</style>
<img src="./views/statics/image/index-bg.png" style="display:none" />
<div class="swiper-container">
    <div class="swiper-wrapper">
    	<div class="swiper-slide">
        	<p class="ani p-title" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.3s"><img src="<?=STATIC_FILE_URL?>/image/setup-3-title.png" /></p>
        </div>
        <div class="swiper-slide">
        	<p class="ani p-word" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="2s"><img src="<?=STATIC_FILE_URL?>/image/setup-4-word2.png"/></p>
        	<p class="ani p-title" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.3s"><img src="<?=STATIC_FILE_URL?>/image/setup-4-title.png" /></p>
        	<p class="ani p-word" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="1s"><img src="<?=STATIC_FILE_URL?>/image/setup-4-word1.png"/></p>
        </div>
        <div class="swiper-slide">
        	<p class="ani p-word" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="1s"><img src="<?=STATIC_FILE_URL?>/image/setup-2-word.png" /></p>
        	<p class="ani p-title" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.3s"><img src="<?=STATIC_FILE_URL?>/image/setup-2-title.png" /></p>
        </div>
        <div class="swiper-slide">
        	<a href="?do=index" style="position:fixed; width:100%; height:100%; opacity:0"></a>
        	<p class="ani p-word" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="1s"><img src="<?=STATIC_FILE_URL?>/image/setup-1-word.png" /></p>
        	<p class="ani p-title" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.3s"><img src="<?=STATIC_FILE_URL?>/image/setup-1-title.png" /></p>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

<script>        
var mySwiper = new Swiper ('.swiper-container', {
	direction: 'vertical',
	loop: false,

	// 如果需要分页器
	pagination: '.swiper-pagination',

	// 如果需要前进后退按钮
	// nextButton: '.swiper-button-next',
	// prevButton: '.swiper-button-prev',

	// 如果需要滚动条
	// scrollbar: '.swiper-scrollbar',
	direction: 'vertical',

	onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		swiperAnimateCache(swiper); //隐藏动画元素 
		swiperAnimate(swiper); //初始化完成开始动画
	}, 
	onSlideChangeEnd: function(swiper){ 
		swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	} 
})        
</script>